<template>
    <Page>
        <!-- 头部布局 -->
        <template #hd>
            <el-row class="a" style="font-size: 14px; font-weight:600;margin-left:10px;">
                <el-form-item label="文章标题">
                    <el-input placeholder="请输入文章标题" clearable v-model="input"/>
                </el-form-item>
                <el-form-item label="状态" style="margin-left:40px;">
                    <el-select v-model="value" filterable placeholder="状态" clearable >
                        <el-option label="启用" value="1" />
                        <el-option label="禁用" value="0" />
                    </el-select>
                </el-form-item>
                <el-button @click="getList" style="margin-left:20px; font-size: 13px;" icon="Search">搜索</el-button>
                <el-button style="font-size: 13px;" icon="Refresh" @click="getListRest">重置</el-button>
                <el-button @click="dialogFormVisible = true" style="font-size: 13px;" icon="Plus">新增商户</el-button>
            </el-row>
        </template>
        <!-- 显示数据表格 -->
        <template #ct>
            <el-table :data="list" height="100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#f8f8f9', 'height': '50px' }"
                :cell-style="{ 'text-align': 'center', 'font-size': '12px' }">
                <el-table-column prop="id" label="ID" width="55" />
                <el-table-column label="图片" prop="picture">
                    <!-- el-table-cloumn 可以使用默认插槽  这个插槽提供了一个
          插槽作用域 方便我们来获取当前行的所有信息 以便我们进行自定义的展示
        -->
                    <template #default="{ row }">
                        <img :src="row.picture" alt="" width="50" height="50">
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="文章标题" />
                <el-table-column prop="btnnumber" label="点击数" />
                <el-table-column prop="state" label="状态" style="text-align: center;">
                    <template #default="{ row }">
                        <el-switch :before-change="() => changestate(row, row.state, row.id)" v-model="row.state"
                            class="ml-2" :active-value="1" :inactive-value="0" style="--el-switch-on-color: #00acac; " />
                    </template>
                </el-table-column>
                <el-table-column prop="author" label="创建者" />
                <el-table-column prop="createdAt" label="创建时间" width="150" style="text-align: center;">
                    <template #default="{ row }"> {{ formatTime(row.createdAt) }}</template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-button @click="openEdit({ ...row })" type='success' text='success'
                            style="color:#00acac; font-size: 12px;" link icon="EditPen">修改</el-button>
                        <el-button @click="handleDel(row.id)" type='success' text='success'
                            style="color:#00acac; font-size: 12px;" link icon="Delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!-- 底部分页器 -->
        <template #ft>
            <el-pagination :small="true" :current-page="page" :page-sizes="[10, 20, 30]" :background="true"
                layout="total, sizes, prev, pager, next, jumper," :total="total" @size-change="handeSizeChange"
                @current-change="handlePageChange">
            </el-pagination>
        </template>
    </Page>
    <!-- 添加店铺弹窗 -->
    <el-dialog v-model="dialogFormVisible" title="新增文章" width="700">
        <el-form :model="article" :rules="rules">
            <el-form-item label="标题" :label-width="140" prop="title">
                <el-input v-model="article.title" autocomplete="off" />
            </el-form-item>
            <el-form-item label="简介" :label-width="140">
                <el-input v-model="article.introduction" autocomplete="off" />
            </el-form-item>
            <el-form-item label="图片" prop="picture" :label-width="140">
                <el-upload list-type="picture-card" name="file" action="http://www.wzsqyg.com/attachment/upload"
                    class="avatar-uploader" v-model:file-list="fileList" :on-success="UploadOk">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="所属店铺" :label-width="140">
                <el-select v-model="article.Associatestore" autocomplete="off">
                    <el-option lable="公共所有" value="公共所有"></el-option>
                    <el-option lable="海口永万路店" value="海口永万路店"></el-option>
                    <el-option lable="海口解放路店" value="海口解放路店"></el-option>
                    <el-option lable="海口长彤路店" value="海口长彤路店"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="排序" :label-width="140">
                <el-input v-model="article.sort" autocomplete="off" />
            </el-form-item>
            <!-- 商品的描述 -->
            <el-form-item label="内容" :label-width="140">
            <QuillEditor theme="snow" v-model:content="article.contet" contentType="html" style="height: 200px;width: 540px;"
                :modules="modules" toolbar="full" />
            </el-form-item>
            <el-form-item label="状态" :label-width="140">
                <el-radio-group v-model="article.state">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" v-on:click="articleAdd('article')">
                    确认
                </el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 编辑店铺弹窗 -->
    <el-dialog v-model="showEdit" title="编辑商户" width="700">
        <el-form :model="editarticle" :rules="rules">
            <el-form-item label="标题" :label-width="140" prop="title">
                <el-input v-model="editarticle.title" autocomplete="off" />
            </el-form-item>
            <el-form-item label="简介" :label-width="140">
                <el-input v-model="editarticle.introduction" autocomplete="off" />
            </el-form-item>
            <el-form-item label="图片" prop="picture" :label-width="140">
                <el-upload list-type="picture-card" name="file" action="http://www.wzsqyg.com/attachment/upload"
                    class="avatar-uploader" v-model:file-list="fileList" :on-success="UploadOk">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="所属店铺" :label-width="140">
                <el-select v-model="editarticle.Associatestore" autocomplete="off">
                    <el-option lable="公共所有" value="公共所有"></el-option>
                    <el-option lable="海口永万路店" value="海口永万路店"></el-option>
                    <el-option lable="海口解放路店" value="海口解放路店"></el-option>
                    <el-option lable="海口长彤路店" value="海口长彤路店"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="排序" :label-width="140">
                <el-input v-model="editarticle.sort" autocomplete="off" />
            </el-form-item>
            <!-- 商品的描述 -->
            <el-form-item label="内容" :label-width="140">
            <QuillEditor theme="snow" v-model:content="article.contet" contentType="html" style="height: 200px;width: 540px;"
                :modules="modules" toolbar="full" />
            </el-form-item>
            <el-form-item label="状态" :label-width="140">
                <el-radio-group v-model="article.state">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" v-on:click="handleEidt">
                    确认
                </el-button>
                <el-button @click="showEdit = false">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" src="./index"></script>
<style lang="scss" scoped>
@import './style.scss';
</style>
